<template>

  <a-drawer
    width="70%"
    closable
    placement="right"
    :visible="visible"
    @close="visible=false"
  >
    
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000;font-weight: bold;">{{titleName}}</div>
      <!-- <div style="font-size: 12px;margin-left: 30px;color: #333333;">收款编号：002</div>
      <div style="font-size: 12px;margin-left: 20px;color: #333333;">前台工号：8888</div>
      <div style="font-size: 12px;margin-left: 30px;color: #333333;">营业日期：2021-10-14</div>
      <div style="font-size: 12px;margin-left: 20px;color: #333333;">统计时间：2021-10-14 10：10：10</div> -->
      <a-button type="primary" style="margin-left: auto;margin-right: 60px" @click="lookImg()">查看图片</a-button>
    </div>
    <a-spin :spinning="spinning" class="table-padding-style" style="padding-top:0">
      <!-- :footer="handleFooterShow"  -->
      <!-- :scroll="{x:1000}" -->
      <a-table  
        :columns="innerColumns"
        :data-source="row_record.detail"
        :rowKey="(record,index)=> index"
        :pagination="false"
      >
        <!--序号-->
        <!-- <template slot="footer" slot-scope="text,record,index">
          <span>合计</span>
        </template> -->
      </a-table>
    </a-spin> 

    <a-spin :spinning="spinning" class="table-padding-style">
      <a-table  
        :columns="innerColumns2"
        :data-source="row_record.dues"
        :rowKey="(record,index)=> index"
        :pagination="false"
      > 
      </a-table>
    </a-spin>
    <a-spin :spinning="spinning" class="table-padding-style">
      <a-table  
        :columns="innerColumns3"
        :data-source="row_record.todayDues"
        :rowKey="(record,index)=> index"
        :pagination="false"
      > 
      </a-table>
    </a-spin>
    <a-spin :spinning="spinning" class="table-padding-style">
      <a-table  
        :columns="innerColumns4"
        :data-source="row_record.lastDay"
        :rowKey="(record,index)=> index"
        :pagination="false"
      > 
      </a-table>
    </a-spin>
    
    <a-modal 
      width="1015px"
      :visible="lookImgVisible"   
      cancelText="关闭"
      @cancel="handleCancel"
    >

      <template>
        <a-tabs type="card" @change="callback">
          <a-tab-pane key="2" tab="项目科室">
            <img :src="findFunc(imgList,'typeImg','2')" />
          </a-tab-pane>
          <a-tab-pane key="3" tab="支付方式">
            <img :src="findFunc(imgList,'typeImg','3')" />
          </a-tab-pane>
          <a-tab-pane key="1" tab="日结总表">
            <img :src="findFunc(imgList,'typeImg','1')" />
          </a-tab-pane>
          <a-tab-pane key="4" tab="支付渠道">
            <img :src="findFunc(imgList,'typeImg','4')" />
          </a-tab-pane>
        </a-tabs>
      </template>

      <template slot="footer"> 
        <a-button type="primary" @click="handleCancel()">关闭</a-button>
      </template>
    </a-modal>
  </a-drawer>
  
  

</template>

<script>
import { getFinanceReportImgList } from '@/api/modular/main/customer/cashier'

export default {
  props: {
    row_record: {
      type: Object,
      default: () => {
        {
        }
      }
    }
  },
  data() {
    return {
      spinning: true,
      visible: false,
      form: this.$form.createForm(this),
      innerColumns: [
        { title: '业务明细',align:'center', dataIndex: 'type', width: 120, ellipsis: true },
        { title: '总额', align:'center', dataIndex: 'totalAmt', width: 120, ellipsis: true },
        { title: '现金', align:'center', dataIndex: 'cashAmount', width: 120, ellipsis: true },
        { title: '银行卡', align:'center', dataIndex: 'bankCardAmount', width: 120, ellipsis: true },
        { title: '券/其他', align:'center', dataIndex: 'couponAmount', width: 120, ellipsis: true },
        { title: '划定金', align:'center', dataIndex: 'useYucunAmount', width: 120, ellipsis: true },
      ],
      innerColumns2: [
        { title: '应收欠款',align:'center', dataIndex: 'totalAmt', width: 120, ellipsis: true },
        { title: '修复消费', align:'center', dataIndex: 'repairAmt', width: 120, ellipsis: true },
        { title: '其中划押金', align:'center', dataIndex: 'useYucunAmount', width: 120, ellipsis: true },
        { title: '当天收款', align:'center', dataIndex: 'todayAmt', width: 120, ellipsis: true },
        { title: '现金收款', align:'center', dataIndex: 'cashAmount', width: 120, ellipsis: true },
        { title: '银行收款', align:'center', dataIndex: 'bankCardAmount', width: 120, ellipsis: true },
      ],
      innerColumns3: [
        { title: '当天销售',align:'center', dataIndex: 'totalAmt', width: 120, ellipsis: true },
        { title: '现金+卡', align:'center', dataIndex: 'cashAndBank', width: 120, ellipsis: true },
        { title: '划存款', align:'center', dataIndex: 'useYucunAmount', width: 120, ellipsis: true },
        { title: '兑换券', align:'center', dataIndex: 'couponAmount', width: 120, ellipsis: true },
        { title: '赠券', align:'center', dataIndex: 'coupons', width: 120, ellipsis: true }, 
      ],
      innerColumns4: [
        { title: '',align:'center', dataIndex: 'type', width: 120, ellipsis: true },
        { title: '上日结余', align:'center', dataIndex: 'lastDayBalance', width: 120, ellipsis: true },
        { title: '本日存入', align:'center', dataIndex: 'depositToday', width: 120, ellipsis: true },
        { title: '本日划扣', align:'center', dataIndex: 'deductionToday', width: 120, ellipsis: true },
        { title: '当日结余', align:'center', dataIndex: 'balanceOfTheDay', width: 120, ellipsis: true }, 
        { title: '公司盈余', align:'center', dataIndex: 'companySurplus', width: 120, ellipsis: true },
      ],
      lookImgVisible: false,

      imgList:[],
      titleName: '日结详情'
    }
  },
  
  methods: {
    callback(key) {
      console.log(key);
    },
     
    handleCancel(){
      this.lookImgVisible = false
    },
    // 查看图片
    lookImg(){
      this.lookImgVisible = true
    },
    handleFooterShow(data) {
      return (
        <a-table
          bordered={false}
          pagination={false}
          columns={this.innerColumns}
          dataSource={[]}
          showHeader={false}
          size="small"
          scroll={{ x: 1700 }}
        ></a-table>
      )
    },
    show() {
      this.visible = true
      this.form.resetFields()

      this.$nextTick(() => {
        this.spinning = true
        console.log('行数据', this.row_record)
        const orderId = this.row_record.orderId
        // noChargeItem({ orderId }).then(res => {
          this.spinning = false
        //   console.log('项目详情', res.data)
        // })
        if(this.row_record.routerPath == '/monthCheck'){
          this.titleName = '月结详情'  
        }else{
          this.titleName = '日结详情'
        }
        let sendData = {
          date: this.row_record.settleDate,
          settleType: this.row_record.settleType
        }
        getFinanceReportImgList(sendData).then(res =>{
          if(res.code == 200){
            this.imgList = [...res.rows]
            console.log(this.imgList)
          }
        })
      })
    },

    findFunc(arr,type,typeNum){ 
      let newData = arr.find(item => {
        return item[`${type}`] == typeNum
      }) 
      if(newData != undefined){
        return newData.url
      }else{
        return ''
      }
      
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-drawer-body{
    padding: 18px 0;
  }
  .table-padding-style{
    padding: 30px 0px; 
    border-bottom: 4px solid #e8e8e8;
  }
  /deep/ .ant-table-thead > tr > th, 
  /deep/ .ant-table-tbody > tr > td{
    padding: 10px 16px !important;
  }
  /deep/ .ant-table-tbody > tr:last-child > td{
    border-bottom: 0 !important;
  }
  /deep/ .ant-tabs-card-content{
    img{
      width: 100% !important;
    }
  }
</style>

